<template>
  <div class="container">
    <div class="card-list">
      <div
        class="card"
        :class="isCurrent(item) ? 'is-current' : ''"
        v-for="item of historyList"
        :key="item.docNo"
        @click="handleClick(item)"
      >
        <div class="filename">
          {{ item.docName }} - {{ item.standardVersion }}<span v-if="isCurrent(item)">(当前版本)</span>
        </div>
        <div class="details">
          <div class="time">{{ item.updateTime }}</div>
          <div class="name">{{ item.updateByName }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import tinymce from 'tinymce/tinymce'
import store from '@/store'
import { Message, MessageBox } from 'element-ui'
import { handleSave } from '@/utils/plugins/docSave/plugin'
import { init_instance_callback } from '@/utils/init'
import { scrollTo } from '@/utils/helpers'
import { fetchHistory } from '@/api'

export default {
  name: 'Versions',
  computed: {
    current() {
      return this.$store.state.xmleditor.originalEditorConfig
    },
    currentNo() {
      return this.$store.state.xmleditor.currentNo
    },
    historyList() {
      const list = this.$store.state.xmleditor.historyList
      return list.length ? list : [{ docNo: this.currentNo || this.current?.docNo }]
    }
  },
  methods: {
    isCurrent(item) {
      return item.docNo === (this.currentNo || this.current?.docNo)
    },
    async handleClick({ docName, standardVersion, docNo }) {
      const redirect = () => {
        const editorConfig = store.state.xmleditor.editorConfig
        store.commit('xmleditor/INIT_EDITOR_CONFIG', { ...editorConfig, docNo })
        init_instance_callback(tinymce.activeEditor)
        Message.success('切换成功')
        store.commit('xmleditor/SET_CURRENT_DOC_NO', docNo)
        if (docNo === this.current.docNo) {
          tinymce.activeEditor.mode.set('design')
        } else {
          tinymce.activeEditor.mode.set('readonly')
        }
        scrollTo()
      }

      const versionName = this.current.docNo === docNo ? '当前编辑版本' : `【${docName} - ${standardVersion}】`

      if (tinymce.activeEditor.isDirty()) {
        try {
          await MessageBox.confirm(`将切换到${versionName}，当前内容未保存，是否保存?`, '提示', {
            confirmButtonText: '保存',
            cancelButtonText: '切换版本',
            distinguishCancelAndClose: true,
            type: 'warning'
          })
          await handleSave()
        } catch (error) {
          if (error === 'cancel') {
            redirect()
          }
        }
      } else {
        await MessageBox.confirm(`将切换到${versionName}，是否切换?`, '提示', {
          confirmButtonText: '切换版本',
          cancelButtonText: '取消',
          type: 'warning'
        })
        redirect()
      }
    }
  },
  mounted() {
    fetchHistory()
  }
}
</script>
<style scoped>
.card {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  margin: 10px 0;
  min-width: 260px;
  cursor: pointer;
}
.card.is-current {
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
}
.card .details {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
}
/* 以下重复内容，可复用 */
.container {
  padding: 20px;
}
</style>
